<template>
	<view class="right-popup">
		<u-popup v-model="popup_show" mode="left" @close="close" width="65%" @open="open">
			<view class="pop-content">
				<view class="title u-text-center u-font-32 u-margin-bottom-40">
					农 场
				</view>
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" bar-height="0" bar-width="120"
				 active-color="#F5B340"></u-tabs>
				<!-- <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs> -->
				<view class="" style="height: 100%;">
					<u-empty text="暂无数据" mode="list" :show="showNodata"></u-empty>
					<scroll-view scroll-y="true" style="height: 85%;" v-if="chenlist.length">
						<view class="u-flex u-col-center u-row-between u-margin-bottom-22" v-for="(item,index) in chenlist" :key="item.id">
							<view class="u-flex-3">
								<image :src="!current?'../../static/images/chick3@2x.png':'../../static/images/chick2@2x.png'" mode="" class="chicken-img"></image>
							</view>
							<view class="u-flex-8">
								<view class="u-text-center">
									{{item.day}}/{{item.max_day}}
								</view>
								<view class="">
									<u-line-progress active-color="#F5B340" :percent="item.progress" striped striped-active></u-line-progress>
								</view>
							</view>
						</view>
						<u-loadmore :status="status" :load-text="loadText" @loadmore="onreachBottom"/>
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "right-popup",
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			popup_show: {
				get() {
					return this.show
				},
				set(newval, oldval) {
					return newval
				},
			}
		},
		created() {
			
		},
		data() {
			return {
				chenlist: [],
				current: 0,
				showNodata: true,
				list: [{
					name: '小鸡'
				}, {
					name: '中鸡'
				}],
				meta: {
					current_page: 0,
					per_page: 10
				},
				status: 'loadmore',
				loadText: {
					loadmore: '点击加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				}
			};
		},
		methods: {
			open() {
				console.log(this.vuex_token)
				if (!this.vuex_token) {
					this.$emit("closePopup")
					this.$u.toast('请先登录')
					return false
				}
				this.getList()
			},
			close() {
				this.meta.current_page = 0;
				this.chenlist = []
				this.current = 0
				this.$emit("closePopup")
			},
			change(index) {
				uni.showLoading({
					mask:true
				})
				this.chenlist = []
				this.meta.current_page = 0
				this.current = index;
				this.status  =  "loadmore"
				this.getList();
			},
			onreachBottom(){
				if(this.meta.current_page === this.meta.total_pages){
					this.status  =  "nomore"
					return false;
				}
				uni.showLoading({
					mask:true
				})
				this.status = "loading"
				this.getList();
			},
			getList() {
				let params = {
					page: this.meta.current_page + 1,
					page_size: this.meta.per_page,
					type: this.current + 1
				}
				this.$u.api.getChickenList(params).then(res => {
					uni.hideLoading()
					if (res.errno === "000") {
						this.showNodata = false
						this.chenlist = [...this.chenlist, ...res.result.data]
						this.meta = res.result.meta
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			}
		},
		destroyed() {
			this.meta.current_page = 0;
			this.chenlist = []
			this.current = 0
		}
	}
</script>

<style>
	.pop-content {
		padding: 80rpx 20rpx;
		box-sizing: border-box;
		height: 100%;
	}

	.title {
		line-height: 40rpx;
	}

	.chicken-img {
		border-radius: 50%;
		width: 90rpx;
		height: 90rpx;
	}
</style>
